{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}天天生鲜-提交订单{% endblock %}

{% block search_bar %}
    <div class="search_bar clearfix">
        <a href="{% url 'goods:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a>
        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
        <div class="search_con fr">
            <form action="/search/" method="get">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="submit" class="input_btn fr" value="搜索">
            </form>
        </div>
    </div>
{% endblock %}

{% block body %}
    <h3 class="common_title">确认收货地址</h3>

    <div class="common_list_con clearfix">
        <dl>
            <dt>寄送到：</dt>
            {% if address %}
                <dd><input type="radio" name="address_id" value="{{ address.id }}"
                           checked="">{{ address.receiver_name }} {{ address.detail_addr }} {{ address.receiver_mobile }}
                </dd>
            {% else %}
                <dd><input type="radio" name="address_id" value="" checked="">请添加地址</dd>
            {% endif %}
        </dl>
        <a href="{% url 'users:address' %}" class="edit_site">编辑收货地址</a>

    </div>

    <h3 class="common_title">支付方式</h3>
    <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
            <input type="radio" name="pay_style" value="1" checked>
            <label class="cash">货到付款</label>
            <input type="radio" name="pay_style" value="2">
            <label class="weixin">微信支付</label>
            <input type="radio" name="pay_style" value="2">
            <label class="zhifubao"></label>
            <input type="radio" name="pay_style" value="2">
            <label class="bank">银行卡支付</label>
        </div>
    </div>

    <h3 class="common_title">商品列表</h3>

    <div class="common_list_con clearfix">
        <ul class="goods_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
        </ul>
        {% for sku in skus %}
            <ul class="goods_list_td clearfix">
                <li class="col01">{{ forloop.counter }}</li>
                <li class="col02"><img src="{{ sku.default_image.url }}"></li>
                <li class="col03">{{ sku.name }}</li>
                <li class="col04">{{ sku.unit }}</li>
                <li class="col05">{{ sku.price }}元</li>
                <li class="col06">{{ sku.count }}</li>
                <li class="col07">{{ sku.amount }}元</li>
            </ul>
        {% endfor %}
    </div>

    <h3 class="common_title">总金额结算</h3>

    <div class="common_list_con clearfix">
        <div class="settle_con">
            <div class="total_goods_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_sku_amount }}元</b></div>
            <div class="transit">运费：<b>{{ trans_cost }}元</b></div>
            <div class="total_pay">实付款：<b>{{ total_amount }}元</b></div>
        </div>
    </div>

    <div class="order_submit clearfix">
        <a href="javascript:;" id="order_btn">提交订单</a>
    </div>
{% endblock %}

{% block footer %}
    <div class="popup_con">
        <div class="popup">
            <p>订单提交成功！</p>
        </div>

        <div class="mask"></div>
    </div>
{% endblock %}

{% block bottom_files %}
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script type="text/javascript">
        $('#order_btn').click(function () {
            // 地址id
            var address_id = $('input[name="address_id"]').val();
            if (address_id == "") {
                alert("请先编辑收货地址!");
            }
            else {
                var order_data = {
                    address_id: address_id,
                    pay_method: $('input[name="pay_style"]:checked').val(),
                    sku_ids: "{{ sku_ids }}",
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                };
                $.post('/orders/commit', order_data, function (data) {
                    if (1 == data.code) {
                        location.href = '/users/login';
                    } else if (6 == data.code) {
                        alert("库存不足，请修改订单！");
                    } else if (0 == data.code) {
                        $('.popup_con').fadeIn('fast', function () {
                            setTimeout(function () {
                                $('.popup_con').fadeOut('fast', function () {
                                    location.href = '/orders/1';
                                });
                            }, 3000)
                        });
                    } else {
                        alert(data.message);
                    }
                });
            }
        });
    </script>
{% endblock %}